import { setupDirective } from '@/directive';
import { setupStore } from '@/store';
import DOMPurify from 'dompurify';
import { createApp } from 'vue';
import App from './App.vue';
import router from './routers';

import { registerElIcons } from '@/plugins/ElIcons';
import { setupGlobalComponents } from '@/plugins/globalComponents';
// 权限路由
import './permission';
// svg-icons注册导入
import 'virtual:svg-icons-register';
// UI框架 element-plus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// 引入暗黑模式 element-plus 2.2 内置暗黑模式
import 'element-plus/theme-chalk/dark/css-vars.css';
// 引入Font Awesome
import '@fortawesome/fontawesome-free/css/all.css';
// 自定义暗黑模式
import '@/styles/element-dark.scss';
// 引入阿里图标库
import '@/assets/blogicon/iconfont.css';
import '@/assets/blogicon/iconfont.js';

import UndrawUi from 'undraw-ui';
import 'undraw-ui/dist/style.css';

const app = createApp(App);
registerElIcons(app);

// 定义自定义指令
app.directive('dompurify-html', {
  mounted(el, binding) {
    const html = binding.value;
    el.innerHTML = DOMPurify.sanitize(html);
  },
  updated(el, binding) {
    const html = binding.value;
    el.innerHTML = DOMPurify.sanitize(html);
  }
});

// 注册全局组件
setupGlobalComponents(app);

// 全局注册 自定义指令(directive)
setupDirective(app);
// 全局注册 状态管理(store)
setupStore(app);
app.use(router);
app.use(UndrawUi);
app.use(ElementPlus);
app.mount('#app');
